<extend name="public@base5" />
<block name="head">
    <link rel="stylesheet" href="__STATIC__/css/mall.css?v={$_static_version}"></link>
</block>
<block name="main">
<div class="row" style="font-size: 14px;">
    <div class="col-9 row row-deck row-cards">
        <div class="col-12">
            <div class="card">
                <div class="card-body row">
                    <div class="col-4 mt-20">
                        <div class="subheader">今日订单量</div>
                        <div class="h2">{$day_0.count}</div>
                    </div>
                    <div class="col-4 mt-20">
                        <div class="subheader">今日消费金额</div>
                        <div class="h2">{$day_0.sum}</div>
                    </div>
                    <div class="col-4 mt-20">
                        <div class="subheader">今日消费人数</div>
                        <div class="h2">{$day_0.unum}</div>
                    </div>
                    <div class="col-4 mt-20">
                        <div class="subheader">一周订单量</div>
                        <div class="h2">{$day_7.count}</div>
                    </div>
                    <div class="col-4 mt-20">
                        <div class="subheader">一周消费金额</div>
                        <div class="h2">{$day_7.sum}</div>
                    </div>
                    <div class="col-4 mt-20">
                        <div class="subheader">一周消费人数</div>
                        <div class="h2">{$day_7.unum}</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-12" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="h3></div>
                            <div class="subheader">日常任务统计</div>
                        </div>
                        
                        <div class="col-12">
                            <div id="login_7day_user_count" style="height:300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        
        
        <div class="col-12 mt-2">
            <div class="card">
                <div class="card-body row">
                    <div class="col-4 mt-2">
                        <div class="subheader">今日任务总奖励</div>
                        <div >总金额:<label class="h2">{$total_score_log_today.task.sum_score+$total_score_log_today.task.sum_coin}</label></div>
                        <div>可提现:<label class="h3">{$total_score_log_today.task.sum_score}</label></div>
                        <div>仅消费:<label class="h3">{$total_score_log_today.task.sum_coin}</label></div>
                    </div>
                    <div class="col-4 mt-2">
                        <div class="subheader">7日任务总奖励</div>
                        <div >总金额:<label class="h2">{$total_score_log_7.task.sum_score+$total_score_log_7.task.sum_coin}</label></div>
                        <div>可提现:<label class="h3">{$total_score_log_7.task.sum_score}</label></div>
                        <div>仅消费:<label class="h3">{$total_score_log_7.task.sum_coin}</label></div>
                    </div>
                    <div class="col-4 mt-2">
                        <div class="subheader">任务总奖励</div>
                        <div >总金额:<label class="h2">{$total_score_log.task.sum_score+$total_score_log.task.sum_coin}</label></div>
                        <div>可提现:<label class="h3">{$total_score_log.task.sum_score}</label></div>
                        <div>仅消费:<label class="h3">{$total_score_log.task.sum_coin}</label></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body row">
                    <div class="col-12">
                        <div class="subheader">销售区占比</div>
                    </div>
                    <div class="col-12">
                        <div id="audit_chart" style="height:300px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-8" style="margin-top: 10px;">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-4">
                            <div class="h3">{$charge}</div>
                            <div class="subheader">累积充值</div>
                        </div>
                        <div class="col-4">
                            <div class="h3">{$withdrawal}</div>
                            <div class="subheader">累积提现</div>
                        </div>
                        <div class="col-12">
                            <div id="charge_log_7day" style="height:260px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

    </div>
    <div class="col-3 row row-deck row-cards">
        <div class="card">
            <div class="card-body row" style="flex: 0 0 auto;">
                <div class="col-12">
                    <div class="subheader">销量排行</div>
                </div>
                
                    <foreach name="item_list" item="vo">
                        <div class="row  mt-3">
                        <div class="col-4"><img width="90px" height="90px" src="{:cmf_get_image_url($vo.item_icon)}"></div>
                        <div class="col-8 item">
                            <div><i>ID:</i><label>{$vo.id}</label></div>
                            <div> <i>商品名称:</i><label class="font2">{$vo.item_name}</label></div>
                            <div><i>销量:</i><label>{$vo.sell_count}</label> <i>售价:</i><label>{$vo.item_price}</label> </div>
                            <div><i>时间:</i><label class="font2">{:date('Y-m-d H:i:s',$vo.create_time)}</label></div>
                        </div>
                        </div>
                    </foreach>
            </div>
        </div>
    </div>
</div>
    <script src="__TMPL__/public/assets/js/echarts.js"></script>

    <script type="text/javascript">
        

        

        // 7日日常任务完成
        option = {
//            title: {
//                text: '日常任务完成统计'
//              },
            legend: {},
            tooltip: {
                trigger: 'item',
                showContent: false
            },
            dataset: {
                source: []
            },
            xAxis: { type: 'category' ,data:{$x_date_7}},
            yAxis: { gridIndex: 0 },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            
            
            grid: {
                top: '16%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            series: {$task_7}
        };
        var login7DayUserCount = echarts.init(document.getElementById('login_7day_user_count'));
        login7DayUserCount.setOption(option);
        
        // 7日充值量
        option = {
            
            legend: {},
            tooltip: {
                trigger: 'item',
                showContent: false
            },
            dataset: {
                source: []
            },
            xAxis: { type: 'category' ,data:{$x_date_7}},
            yAxis: { gridIndex: 0 },
            toolbox: {
                feature: {
                saveAsImage: {}
                }
            },
            grid: {
                top: '16%',
                left: '1%',
                right: '1%',
                bottom: '1%',
                containLabel: true
            },
            series: [
                {'name':'充值',
                'type': 'line',
                'data': {$charge_7}
                },{'name':'提现',
                'type': 'line',
                'data': {$withdrawal_7}
                }
            ]
        };
        var login7DayUserCount = echarts.init(document.getElementById('charge_log_7day'));
        login7DayUserCount.setOption(option);

        option = {
            tooltip: {
                trigger: 'item'
            },
            legend: { 
                left: 'center'
            },
            series: [
                {
                    name: '销量占比',
                    type: 'pie',
                    radius: ['0%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {$sell_count}
                },
                {
                    name: '销售额占比',
                    type: 'pie',
                    radius: ['51%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: {$sell_cost}
                }
            ]
        };
        var login7DayUserCount = echarts.init(document.getElementById('audit_chart'));
        login7DayUserCount.setOption(option);
    </script>

    <script type="text/javascript">
        // 表格数据自定义排序，数据按int（float、string、date）进行升序或降序排列  
        // 排序 tableId: 表的id,iCol:第几列从0开始 ；dataType：iCol对应的列显示数据的数据类型，例如：日期就是date
        function sortTable(th, tableId, iCol, dataType) {
            var ascChar = "▲";
            var descChar = "▼";
            var table = document.getElementById(tableId);
            // 排序标题加背景色
            for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
                var th = $(table.tHead.rows[0].cells[t]);
                var thText = th.html().replace(ascChar, "").replace(descChar, "");
                if (t == iCol) {
                    // th.css("background-color", "#ccc");
                } 
                else {
                    // th.css("background-color", "#d2d8de");
                    th.html(thText);
                }
            }

            var tbody = table.tBodies[0];
            var colRows = tbody.rows;
            var aTrs = new Array;

            // 将得到的行放入数组，备用
            for (var i = 0; i < colRows.length; i++) {
                // 注：如果要求“分组明细不参与排序”，把下面的注释去掉即可
                // if ($(colRows[i]).attr("group") != undefined) {
                aTrs.push(colRows[i]);
                // }
            }

            // 判断上一次排列的列和现在需要排列的是否同一个。
            var thCol = $(table.tHead.rows[0].cells[iCol]);
            if (table.sortCol == iCol) {
                aTrs.reverse();
            } 
            else {
                // 如果不是同一列，使用数组的sort方法，传进排序函数
                aTrs.sort(compareEle(iCol, dataType));
            }

            var oFragment = document.createDocumentFragment();
            for (var i = 0; i < aTrs.length; i++) {
                oFragment.appendChild(aTrs[i]);
            }
            tbody.appendChild(oFragment);

            // 记录最后一次排序的列索引
            table.sortCol = iCol;

            // 给排序标题加“升序、降序” 小图标显示
            var th = $(table.tHead.rows[0].cells[iCol]);
            if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
                th.html(th.html() + ascChar);
            } 
            else if (th.html().indexOf(ascChar) != -1) {
                th.html(th.html().replace(ascChar, descChar));
            } 
            else if (th.html().indexOf(descChar) != -1) {
                th.html(th.html().replace(descChar, ascChar));
            }

            // 重新整理分组
            var subRows = $("#" + tableId + " tr[parent]");
            for (var t = subRows.length - 1; t >= 0; t--) {
                var parent = $("#" + tableId + " tr[group='"
                + $(subRows[t]).attr("parent") + "']");
                parent.after($(subRows[t]));
            }
        }

        // 将列的类型转化成相应的可以排列的数据类型
        function convert(sValue, dataType) {
            switch (dataType) {
                case "int":
                    return parseInt(sValue, 10);
                case "float":
                    return parseFloat(sValue);
                case "date":
                    return new Date(Date.parse(sValue));
                case "string":
                default:
                    return sValue.toString();
            }
        }

        // 排序函数，iCol表示列索引，dataType表示该列的数据类型
        function compareEle(iCol, dataType) {
            return function(oTR1, oTR2) {
                var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
                var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
                if (vValue1 < vValue2) {
                    return -1;
                } 
                else {
                    return 1;
                }

            };
        }

        // 去掉html标签
        function removeHtmlTag(html) {
            return html.replace(/<[^>]+>/g, "");
        }
    </script>
</block>